<template>
  <el-dialog title="发送配置" :visible.sync="visible" width="1280px" top="5vh" append-to-body>
    <div class="module-container">
      <!-- 景点管理模块 -->
      <div class="module-card">
        <div class="module-header" @click="toggleModule('mark')">
          <span class="module-title">景点管理</span>
          <i :class="expandedModules.mark ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
        </div>
        <div v-show="expandedModules.mark" class="module-content">
          <el-table
            v-loading="loading.mark"
            :data="markList"
            @selection-change="handleMarkSelectionChange"
            size="mini"
            border>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="客户" align="center" prop="nickName" width="155" show-overflow-tooltip/>
            <el-table-column label="项目" align="center" prop="projectname" width="155" show-overflow-tooltip/>
            <el-table-column label="景点名称" align="center" prop="name" />
            <el-table-column label="设备ID" align="center" prop="deviceId" show-overflow-tooltip/>
            <el-table-column label="所属类型" prop="type" align="center" width="80">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.mark_type_name" :value="scope.row.type"/>
              </template>
            </el-table-column>
            <el-table-column label="lat坐标" align="center" prop="lat" />
            <el-table-column label="lng坐标" align="center" prop="lng" />
          </el-table>
          <div class="pagination-container">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="markTotal"
              :page-size="markQueryParams.pageSize"
              :current-page="markQueryParams.pageNum"
              @current-change="handleMarkPageChange">
            </el-pagination>
          </div>
        </div>
      </div>

      <!-- 景区管理模块 -->
      <div class="module-card">
        <div class="module-header" @click="toggleModule('park')">
          <span class="module-title">景区管理</span>
          <i :class="expandedModules.park ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
        </div>
        <div v-show="expandedModules.park" class="module-content">
          <el-table
            v-loading="loading.park"
            :data="parkList"
            @selection-change="handleParkSelectionChange"
            size="mini"
            border>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="客户" align="center" prop="nickName" width="155" show-overflow-tooltip/>
            <el-table-column label="项目" align="center" prop="projectname" width="155" show-overflow-tooltip/>
            <el-table-column label="编号" align="center" prop="id" width="55"/>
            <el-table-column label="景区图片logo" align="center" prop="logo" show-overflow-tooltip/>
            <el-table-column label="景区MP3播报文件" align="center" prop="mp3" show-overflow-tooltip/>
            <el-table-column label="景区详情" align="center" prop="parkInfo" show-overflow-tooltip/>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="parkTotal"
              :page-size="parkQueryParams.pageSize"
              :current-page="parkQueryParams.pageNum"
              @current-change="handleParkPageChange">
            </el-pagination>
          </div>
        </div>
      </div>

      <!-- 广告管理模块 -->
      <div class="module-card">
        <div class="module-header" @click="toggleModule('advertiser')">
          <span class="module-title">广告管理</span>
          <i :class="expandedModules.advertiser ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
        </div>
        <div v-show="expandedModules.advertiser" class="module-content">
          <el-table
            v-loading="loading.advertiser"
            :data="advertiserList"
            @selection-change="handleAdvertiserSelectionChange"
            size="mini"
            border>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="客户" align="center" prop="nickName" width="155" show-overflow-tooltip/>
            <el-table-column label="项目" align="center" prop="projectname" width="155" show-overflow-tooltip/>
            <el-table-column label="编号" align="center" prop="id" width="55"/>
            <el-table-column label="广告图标地址" align="center" prop="img" show-overflow-tooltip/>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="advertiserTotal"
              :page-size="advertiserQueryParams.pageSize"
              :current-page="advertiserQueryParams.pageNum"
              @current-change="handleAdvertiserPageChange">
            </el-pagination>
          </div>
        </div>
      </div>

      <!-- 新闻管理模块 -->
      <div class="module-card">
        <div class="module-header" @click="toggleModule('news')">
          <span class="module-title">新闻管理</span>
          <i :class="expandedModules.news ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
        </div>
        <div v-show="expandedModules.news" class="module-content">
          <el-table
            v-loading="loading.news"
            :data="newsList"
            @selection-change="handleNewsSelectionChange"
            size="mini"
            border>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="客户" align="center" prop="nickName" width="155" show-overflow-tooltip/>
            <el-table-column label="项目" align="center" prop="projectname" width="155" show-overflow-tooltip/>
            <el-table-column label="编号" align="center" prop="id" width="55"/>
            <el-table-column label="新闻封面图" align="center" prop="coverImg" show-overflow-tooltip/>
            <el-table-column label="新闻标题" align="center" prop="titleName" show-overflow-tooltip/>
            <el-table-column label="发布时间" align="center" prop="releaseTime" width="180">
              <template slot-scope="scope">{{scope.row.releaseTime}}</template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="newsTotal"
              :page-size="newsQueryParams.pageSize"
              :current-page="newsQueryParams.pageNum"
              @current-change="handleNewsPageChange">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="el-dialog--center">
      <el-button type="primary" icon="el-icon-upload" @click="handleSelectDisplay">发 送</el-button>
      <el-button type="info" icon="el-icon-close" @click="closeSelectDisplay">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listList } from "@/api/iot/marklist";
import { listCom } from "@/api/iot/park";
import { listAdvertiser } from "@/api/iot/advertiser";
import { listNews } from "@/api/iot/newss";
import { listUser } from '@/api/iot/tool'
import { listProject } from '@/api/iot/faproject'

export default {
  dicts: ['mark_type_name'],
  name: "MultiModuleSelector",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 模块展开状态
      expandedModules: {
        mark: false,
        park: false,
        advertiser: false,
        news: false
      },
      // 景点管理数据
      loading: {
        mark: false,
        park: false,
        advertiser: false,
        news: false
      },
      markList: [],
      markTotal: 0,
      markQueryParams: {
        pageNum: 1,
        pageSize: 5,
        name: null,
        deviceId: null,
        lat: null,
        lng: null,
        type: null
      },
      selectedMarks: [],
      // 景区管理数据
      parkList: [],
      parkTotal: 0,
      parkQueryParams: {
        pageNum: 1,
        pageSize: 5,
        logo: null,
        mp3: null,
        parkInfo: null
      },
      selectedParks: [],
      // 广告管理数据
      advertiserList: [],
      advertiserTotal: 0,
      advertiserQueryParams: {
        pageNum: 1,
        pageSize: 5,
        img: null
      },
      selectedAdvertisers: [],
      // 新闻管理数据
      newsList: [],
      newsTotal: 0,
      newsQueryParams: {
        pageNum: 1,
        pageSize: 5,
        coverImg: null,
        titleName: null,
        articleContent: null
      },
      selectedNews: [],
      // 通用数据
      options: [],
      projectnameOptions: []
    };
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        // 对话框打开时初始化数据
        this.fetchUsers();
        this.fetchProjectnames();
      }
    }
  },
  methods: {
    // 切换模块展开状态
    toggleModule(moduleName) {
      this.expandedModules[moduleName] = !this.expandedModules[moduleName];

      // 如果展开且数据未加载，则加载数据
      if (this.expandedModules[moduleName]) {
        switch(moduleName) {
          case 'mark':
            if (this.markList.length === 0) this.getMarkList();
            break;
          case 'park':
            if (this.parkList.length === 0) this.getParkList();
            break;
          case 'advertiser':
            if (this.advertiserList.length === 0) this.getAdvertiserList();
            break;
          case 'news':
            if (this.newsList.length === 0) this.getNewsList();
            break;
        }
      }
    },

    // 获取用户列表
    async fetchUsers() {
      try {
        const response = await listUser();
        var resList = response.rows;
        if (response && resList) {
          this.options = resList.map(user => ({
            userId: user.userId,
            nickName: user.nickName
          }));
        }
      } catch (error) {
        console.error('获取用户列表失败', error);
      }
    },

    // 获取项目列表
    async fetchProjectnames() {
      try {
        const response = await listProject();
        var resList = response.rows;
        if (response && resList) {
          this.projectnameOptions = resList.map(item => ({
            id: item.id,
            projectname: item.projectname,
          }));
        }
      } catch (error) {
        console.error('Error fetching project names:', error);
      }
    },

    // 景点管理相关方法
    getMarkList() {
      this.loading.mark = true;
      listList(this.markQueryParams).then(response => {
        this.markList = response.rows;
        this.markTotal = response.total;
        this.loading.mark = false;
      });
    },
    handleMarkSelectionChange(selection) {
      this.selectedMarks = selection;
    },
    handleMarkPageChange(page) {
      this.markQueryParams.pageNum = page;
      this.getMarkList();
    },

    // 景区管理相关方法
    getParkList() {
      this.loading.park = true;
      listCom(this.parkQueryParams).then(response => {
        this.parkList = response.rows;
        this.parkTotal = response.total;
        this.loading.park = false;
      });
    },
    handleParkSelectionChange(selection) {
      this.selectedParks = selection;
    },
    handleParkPageChange(page) {
      this.parkQueryParams.pageNum = page;
      this.getParkList();
    },

    // 广告管理相关方法
    getAdvertiserList() {
      this.loading.advertiser = true;
      listAdvertiser(this.advertiserQueryParams).then(response => {
        this.advertiserList = response.rows;
        this.advertiserTotal = response.total;
        this.loading.advertiser = false;
      });
    },
    handleAdvertiserSelectionChange(selection) {
      this.selectedAdvertisers = selection;
    },
    handleAdvertiserPageChange(page) {
      this.advertiserQueryParams.pageNum = page;
      this.getAdvertiserList();
    },

    // 新闻管理相关方法
    getNewsList() {
      this.loading.news = true;
      listNews(this.newsQueryParams).then(response => {
        this.newsList = response.rows;
        this.newsTotal = response.total;
        this.loading.news = false;
      });
    },
    handleNewsSelectionChange(selection) {
      this.selectedNews = selection;
    },
    handleNewsPageChange(page) {
      this.newsQueryParams.pageNum = page;
      this.getNewsList();
    },

    // 发送按钮处理
    handleSelectDisplay() {
      const selectedData = {
        marks: this.selectedMarks,
        parks: this.selectedParks,
        advertisers: this.selectedAdvertisers,
        news: this.selectedNews
      };

      // 检查是否至少选择了一项
      const totalSelected =
        this.selectedMarks.length +
        this.selectedParks.length +
        this.selectedAdvertisers.length +
        this.selectedNews.length;

      if (totalSelected === 0) {
        this.$modal.msgWarning("请至少选择一项内容");
        return;
      }

      // 发送选择的数据到父组件
      this.$emit('select-display', selectedData);
      this.closeSelectDisplay();
    },

    // 关闭对话框
    closeSelectDisplay() {
      this.$emit('update:visible', false);
      // 重置选择
      this.selectedMarks = [];
      this.selectedParks = [];
      this.selectedAdvertisers = [];
      this.selectedNews = [];
    }
  }
};
</script>

<style scoped>
.module-container {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 10px;
}

.module-card {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  margin-bottom: 10px;
  background: #f9f9f9;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  background: #f0f0f0;
  border-bottom: 1px solid #e6e6e6;
  transition: background 0.3s;
}

.module-header:hover {
  background: #e6f7ff;
}

.module-title {
  font-weight: bold;
  color: #333;
}

.module-content {
  padding: 15px;
  background: white;
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

/* 滚动条样式 */
.module-container::-webkit-scrollbar {
  width: 8px;
}

.module-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.module-container::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 4px;
}

.module-container::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

.el-dialog--center {
  text-align: center;
}
</style>
